import { CheckSquareFilled, CloseCircleOutlined, Loading3QuartersOutlined, UserAddOutlined } from "@ant-design/icons";
import { useContext, useState } from "react";
import authencation from "../../plugins/authencation";
import { MemberContext } from "../../contexts/Member";

export default function Login() {
    const [username, setUsername] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<{
        code: string;
        message: string;
    }>();
    const { setMember } = useContext(MemberContext);

    const toLogin = () => {
        if(loading) {
            return;
        }
        setLoading(true);
        authencation.login({username, password: ''}).then((member) => {
            console.log('member', member, authencation.getToken());
            setMember({
                member,
                token: authencation.getToken()
            });
        }).catch((error) => {
            console.log('error', error);
            setError(error);
        }).finally(() => {
            setLoading(false);
        });
    }

    return <div className="h-screen w-screen flex flex-col items-center justify-center gap-8 px-8">
        <div className="flex items-center justify-center shadow-xl rounded-full text-5xl text-gray-300 p-6">
            <UserAddOutlined />
        </div>
        <div className="text-cyan-500 text-center text-sm">Flydany提供认证服务</div>
        <div className="text-lg flex flex-col gap-8 w-full">
            <div className="flex flex-col gap-4">
                <input className="bg-gray-50 shadow font-medium h-12 w-full rounded px-4 text-center" value={username} maxLength={32} onChange={(e) => setUsername(e.target.value)} />
                {
                    error
                        ? <div className="text-red-500 flex items-center text-sm gap-2">
                            <div><CloseCircleOutlined /></div>
                            <div>{error.message}</div>
                        </div>
                        : <></>
                }
            </div>
            <button className="rounded-3xl w-full h-12 shadow bg-gradient-to-r from-blue-500 to-cyan-500 text-white" type="button" disabled={loading} onClick={toLogin}>
                {
                    loading
                        ? <div className="text-2xl flex items-center justify-center"><Loading3QuartersOutlined spin /></div>
                        : <>一键登录</>
                }
            </button>
        </div>
        <div className="text-cyan-500 text-sm flex justify-center items-baseline gap-2">
            <div><CheckSquareFilled /></div>
            <div>同意《Flydany一键登录服务条款》、《APP服务条款》</div>
        </div>
    </div>;
}